<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四下第3课《字符编码》ASCII码破解小游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-effect {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }
        
        .bounce-in {
            animation: bounceIn 0.6s ease-out;
        }
        
        @keyframes bounceIn {
            0% {
                transform: scale(0.3);
                opacity: 0;
            }
            50% {
                transform: scale(1.05);
            }
            70% {
                transform: scale(0.9);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
        
        .pulse-animation {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: .5;
            }
        }
        
        .ascii-code-container {
            font-family: 'Courier New', monospace;
            letter-spacing: 0.2em;
        }
    </style>
</head>
<body class="gradient-bg min-h-screen flex items-center justify-center">
    <div class="absolute inset-0 bg-black opacity-10"></div>
    
    <!-- 游戏内容 -->
    <div id="gameContent" relative z-10">
        <div class="card-effect rounded-2xl p-8 shadow-2xl text-center w-full max-w-2xl mx-4">
            <!-- 游戏标题 -->
            <div class="mb-6">
                <h1 class="text-4xl font-bold text-gray-800 mb-2">🔐 密码破解小游戏</h1>
                <p class="text-gray-600">四下第3课《字符编码》ASCII码破解小游戏</p>
            </div>
            
            <!-- 提示信息 -->
            <div class="bg-indigo-50 border border-indigo-200 text-indigo-800 p-4 rounded-lg mb-6 shadow-sm">
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <i class="fas fa-info-circle text-indigo-500 mt-1 mr-2"></i>
                    </div>
                    <div class="text-left">
                        <p class="font-medium mb-1 text-xl">游戏背景：</p>
                        <p class="text-sm">你找到了一张纸上面写着一系列的数字。其实是ASCII码，你的任务是将这些ASCII值破解。</p>
                    </div>
                </div>
            </div>
            
            <!-- 计时器 -->
            <div class="bg-gradient-to-r from-amber-100 to-yellow-100 rounded-lg p-4 mb-6 flex items-center justify-center shadow-md border border-amber-200">
                <i class="fas fa-clock text-amber-700 mr-2"></i>
                <span class="text-lg font-medium text-gray-700 mr-2">时间：</span>
                <span class="text-lg font-bold text-amber-700" id="timerText">0.00</span>
                <span class="text-lg font-medium text-gray-700 ml-1">秒</span>
            </div>
            
            <!-- 游戏区域 -->
            <div class="bg-gradient-to-br from-white to-gray-50 rounded-xl p-6 shadow-lg mb-6 border border-gray-100">
                <div class="mb-6">
                    <div class="flex items-center mb-2">
                        <i class="fas fa-code text-indigo-600 mr-2"></i>
                        <h3 class="text-lg font-bold text-gray-800">ASCII码：</h3>
                    </div>
                    <div class="bg-gradient-to-r from-cyan-100 to-blue-100 rounded-lg p-4 ascii-code-container border border-cyan-200 shadow-md">
                        <p class="text-lg font-bold text-cyan-700" id="asciiCodeText"></p>
                    </div>
                </div>
                
                <div class="mb-6">
                    <div class="flex items-center mb-2">
                        <i class="fas fa-pencil-alt text-indigo-600 mr-2"></i>
                        <label for="guessWord" class="text-lg font-bold text-gray-800">你的猜测：</label>
                    </div>
                    <input type="text" id="guessWord" class="w-full px-4 py-3 border border-indigo-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white shadow-sm" placeholder="请输入你的猜测...">
                </div>
                
                <button id="submitButton" onclick="checkGuess()" class="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-bold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 shadow-lg">
                    <i class="fas fa-key mr-2"></i>提交猜测
                </button>
                
                <div id="result" class="mt-6"></div>
            </div>
            
            <!-- 重新开始按钮 -->
            <button id="restartButton" onclick="restartGame()" class="bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white font-bold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-500 shadow-lg hidden">
                <i class="fas fa-redo mr-2"></i>重新开始
            </button>
        </div>
    </div>
    

    <script>
        var words = ["Secret", "Create", "Public", "School", "Summer", "Select", "Record", "System", "Square", "Stress"]; // 存储多个单词
        var word = words[Math.floor(Math.random() * words.length)]; // 随机选择一个单词
    
        var asciiCodes = [];
        for (var i = 0; i < word.length; i++) {
            asciiCodes.push(word.charCodeAt(i)); // 将单词转换为 ASCII 码
        }
    
        var timer = null;
        var milliseconds = 0;
        var gameCompleted = false;

        function startTimer() {
            timer = setInterval(function() {
                milliseconds++;
                document.getElementById('timerText').innerHTML = (milliseconds / 100).toFixed(2);
            }, 10);
        }

        function stopTimer() {
            clearInterval(timer);
        }

        function checkGuess() {
            if (gameCompleted) return;
            
            var guessInput = document.getElementById('guessWord').value;
            var submitButton = document.getElementById('submitButton');
            var restartButton = document.getElementById('restartButton');
            var resultElement = document.getElementById('result');
            
            if (guessInput.length !== asciiCodes.length) {
                resultElement.innerHTML = '<div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg flex items-center shadow-sm"><i class="fas fa-exclamation-circle text-red-500 mr-2"></i>输入的单词长度不正确，请重新猜测。</div>';
                return;
            }

            for (var i = 0; i < asciiCodes.length; i++) {
                if (guessInput.charCodeAt(i) !== asciiCodes[i]) {
                    resultElement.innerHTML = '<div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg flex items-center shadow-sm"><i class="fas fa-exclamation-circle text-red-500 mr-2"></i>猜测错误，请重新猜测。</div>';
                    return;
                }
            }

            stopTimer();
            gameCompleted = true;
            submitButton.disabled = true; // 设置按钮为不可点击
            // 完全重写按钮样式，确保禁用状态下清晰可见
            submitButton.className = "bg-gray-600 text-gray-300 font-bold py-3 px-6 rounded-lg cursor-not-allowed shadow-md";
            resultElement.innerHTML = '<div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg flex items-center shadow-sm"><i class="fas fa-check-circle text-green-500 mr-2"></i>恭喜你，成功破解出单词 "' + word + '"！用时 ' + (milliseconds / 100).toFixed(2) + ' 秒。</div>';
            restartButton.classList.remove('hidden');
        }
        
        function restartGame() {
            // 重置游戏状态
            gameCompleted = false;
            milliseconds = 0;
            document.getElementById('timerText').innerHTML = '0.00';
            document.getElementById('guessWord').value = '';
            document.getElementById('result').innerHTML = '';
            
            // 随机选择新单词
            word = words[Math.floor(Math.random() * words.length)];
            asciiCodes = [];
            for (var i = 0; i < word.length; i++) {
                asciiCodes.push(word.charCodeAt(i));
            }
            document.getElementById('asciiCodeText').innerHTML = asciiCodes.join(' ');
            
            // 重置按钮状态
            var submitButton = document.getElementById('submitButton');
            var restartButton = document.getElementById('restartButton');
            submitButton.disabled = false;
            // 完全恢复按钮的原始样式
            submitButton.className = "bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-bold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 shadow-lg";
            restartButton.classList.add('hidden');
            
            // 重新开始计时
            startTimer();
        }
    
        window.onload = function() {
            document.getElementById('asciiCodeText').innerHTML = asciiCodes.join(' '); // 显示 ASCII 码
            startTimer();
            
        };
    </script>
</body>
</html>
